<template>
  <div>
    <h1 ref="hello">hello</h1>
    <Count ref="CountComp" />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "App",
  });
</script>

<script setup lang="ts">
  import { ref, onMounted } from "vue";
  import Count from "@/components/Count/index.vue";
  /* 
      如何在setup中拿到ref代表的DOM
      1. 新建一个响应式数据(一定要在setup最外层新建)，名称和对应的ref名称保存一致
      2. 这个ref对象的value属性就保存了当前的DOM
  */
  const hello = ref();
  onMounted(() => {
    console.log(hello.value);
    hello.value.style.color = "pink";
  });

  //如果ref设置给了组件上，则ref响应式数据保存的是子组件的组件实例
  const CountComp = ref();
  onMounted(() => {
    console.log(CountComp.value.a, 111);
  });
</script>
<style lang="scss" scoped></style>
